<template>
  <div>
    <div v-if="tableData.length">
      <h2>购物车：{{tableData.length}}种商品</h2>
      <el-table
          ref="multipleTable"
          stripe
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="商品"
            width="120">
          <template slot-scope="scope">
            <img :src="scope.row.picGoods" class="pic">
            <h4 style="margin-bottom: 0;text-align: center">{{scope.row.goodsName}}</h4>
          </template>
        </el-table-column>
        <el-table-column
            label="折扣"
            align="center">
          <template slot-scope="scope">{{scope.row.discount}}折</template>
        </el-table-column>
        <el-table-column
            label="单价"
            align="center">
          <template slot-scope="scope">
            ￥{{scope.row.price}}
          </template>
        </el-table-column>
        <el-table-column
            label="数量"
            align="center">
          <template slot-scope="scope">
            <el-input-number size="mini" v-model="scope.row.num" :min="1" :max="scope.row.piece"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
            label="金额"
            align="center">
          <template slot-scope="scope">￥{{scope.row.price*scope.row.num}}</template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteProduct(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="settled()">结算</el-button>
      </div>
    </div>
    <div v-if="!tableData.length">
      <el-empty description="您的购物车是空的，您可以去逛逛">
        <el-button type="primary" @click="goHome">去逛逛</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkOut",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteProduct(val){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.post("/deleteCart", [{
        userId: userId,
        goodId: val
      }]).then(res => {
        this.getCart()
        this.$bus.$emit("deleteCart")
      })
    },
    goHome(){
      this.$router.push({
        path: '/home'
      })
    },
    settled(){
      if(this.multipleSelection.length === 0){
        this.$message.warning("请选择要购买的商品")
      } else{
        let goodIds = []
        let nums = []
        this.multipleSelection.forEach(good => {
          goodIds.unshift(good.id)
          nums.unshift(good.num)
        })
        const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
        this.$axios.post("/changeNum", {
          userId: userId,
          goodId: goodIds,
          nums: nums
        }).then(res => {
          this.$router.push({
            path: 'settlement',
            query: {
              goodIds: goodIds
            }
          })
        })
      }
    },
    getCart(){
      const userId = JSON.parse(sessionStorage.getItem("userInfo")).id
      this.$axios.get(`/cart/${userId}`)
          .then(res => {
            this.tableData = res.data.data.goods
            let nums = res.data.data.nums
            this.tableData.forEach((good, index) => {
              good.picGoods = "data:image/jpeg;base64,"+good.picGoods
              this.$set(good, 'num', nums[index])
            })
          })
    }
  },
  created() {
    this.getCart()
  }
}
</script>

<style scoped>
.pic{
  position: relative;
  width: 100px;
  top: 15px
}
</style>